<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <title th:text="${blogById.getTitle()}"></title>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/gloable.css}"/>
    <link rel="stylesheet" th:href="@{/css/nprogress.css}"/>
    <link rel="stylesheet" th:href="@{/css/blog.css}"/>
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <link rel="stylesheet" th:href="@{/css/typo.css}">
    <link rel="stylesheet" th:href="@{/css/master.css}"/>
    <link rel="stylesheet" th:href="@{/prism/prism.css}">
    <link rel="stylesheet" th:href="@{/tocbot/tocbot.css}">
    <link rel="stylesheet" th:href="@{/css/message.css}"/>
    <style>
        .commentHr {
            height: 1px;
            margin-left: 53px;
            background-color: #1E9FFF;

            color: #1E9FFF !important
        }
    </style>
</head>
<body>
<div class="header">
</div>
<header class="gird-header">
    <div class="header-fixed">
        <div class="header-inner">
            <span href="javascript:void(0)" class="header-logo">MyBlog</span>
            <nav class="nav" id="nav">
                <ul>
                    <th:block th:include="include :: headnav"/>
                </ul>
            </nav>
            <a href="/User/QQLogin" class="blog-user">
                <!--                <i class="fa fa-qq"></i>-->
            </a>
            <a class="phone-menu">
                <i></i>
                <i></i>
                <i></i>
            </a>
        </div>
    </div>
</header>
<div class="doc-container">
    <div class="container-fixed">
        <div class="col-content" style="width:100%">
            <div class="inner">
                <article class="article-list">
                    <input type="hidden" value="@Model.BlogTypeID" id="blogtypeid"/>
                    <div class="layui-container">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md9">
                                <section class="article-item" id="waypoint">
                                    <aside class="title" style="line-height:1.5;">
                                        <h4 th:text="${blogById.getTitle()}"></h4>
                                        <p class="fc-grey fs-14">
                                            <small>
                                                作者：<a href="javascript:void(0)" target="_blank" class="fc-link"
                                                      th:text="${blogById.getUserId().getNickname()}"></a>
                                            </small>
                                            <small class="ml10">围观群众：<i class="readcount"
                                                                        th:text="${blogById.getViews()}"></i></small>
                                            <small class="ml10">更新于 <label
                                                    th:text="${#dates.format(blogById.getUpdateTime(),'yyyy-mm-dd hh:mm:ss')}"></label>
                                            </small>
                                        </p>
                                    </aside>
                                    <div class="time mt10" style="padding-bottom:0;">
                                        <span class="day" th:text="${calendar.day}"></span>
                                        <span class="month fs-18" th:text="${calendar.month}+月"><small
                                                class="fs-14">月</small></span>
                                        <span class="year fs-18" th:text="${calendar.year}+年">2018</span>
                                    </div>
                                    <div class="content typo js-toc-content"
                                         style="border-bottom: 1px solid #e1e2e0; padding-bottom: 20px;">
                                        <div id="markdownToHtml" th:utext="${blogById.content}">
                                        </div>
                                        <div class="copyright mt20">
                                            <p class="f-toe fc-black">
                                                非特殊说明，本文版权归 <span
                                                    th:text="${blogById.getUserId().getNickname()}"></span>
                                                所有，转载请注明出处.
                                            </p>
                                            <p class="f-toe">
                                                本文标题：
                                                <a href="#" class="r-title" th:text="${blogById.getTitle()}"></a>
                                            </p>
                                            <p class="f-toe">
                                                本文网址：
                                                <a href="#"
                                                   th:text="'http://www.marlone.xyz/user/toReadBlog/'+${blogById.getId()}">7</a>
                                            </p>
                                        </div>
                                        <div id="aplayer" style="margin:5px 0"></div>
                                        <!--                                        <h6>延伸阅读</h6>-->
                                        <ol class="b-relation"></ol>
                                    </div>
                                </section>
                            </div>
                            <div class="layui-col-md3">
                                <section class="article-item" style="position: fixed;">
                                    <div class="toc-container" style="position: fixed;"></div>
                                    <ol class="js-toc">
                                    </ol>
                                </section>
                            </div>
                            <div class="layui-col-md9">
                                <section class="article-item">
                                    <fieldset class="layui-elem-field">
                                        <legend>评论区</legend>
                                        <div class="layui-field-box">
                                            <ul class="message-list" id="blog-comment">
                                            </ul>
                                        </div>
                                    </fieldset>
                                    <fieldset id="comment-container" class="layui-elem-field layui-field-title">
                                        <legend>发表评论</legend>
                                        <div class="layui-field-box">
                                            <div class="leavemessage" style="text-align:initial">
                                                <form class="layui-form" action="">
                                                    <input type="hidden" name="blogId"
                                                           th:value="${blogById.getId()}">
                                                    <input type="hidden" name="parentCommentId"
                                                           value="0">
                                                    <div class="layui-form-item">
                                                    <textarea name="content" lay-verify="required"
                                                              placeholder="请输入内容" id="remarkEditor"
                                                              class="layui-textarea"></textarea>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <button id="commentBut" class="layui-btn layui-btn-normal"
                                                                lay-filter="topComment"
                                                                lay-submit>发表评论
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </fieldset>
                                </section>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</div>
<!--右下角小图标-->
<div id="toolbar" class="m-fixed m-right-bottom" style="display: none">
    <div style="height: 40px">
        <a href="#comment-container" class="layui-btn layui-btn-normal">评论</a>
    </div>
    <div id="wechartQR" style="width: 64px;height: 40px">
        <button class="layui-btn layui-btn-normal layui-icon layui-icon-login-wechat"
                style="width: 64px;height: 38px; font-size: 25px;">
        </button>
    </div>

    <div style="width: 64px;height: 40px">
        <button style="width: 64px;" id="toTop" class="layui-btn layui-btn-normal">
            <i class="layui-icon layui-icon-top" style="font-size: 35px;margin-left: -2.5px;"></i>
        </button>
    </div>
</div>

<th:block th:include="include :: footer"/>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/yss/gloable.js}"></script>
<script th:src="@{/js/plugins/nprogress.js}"></script>
<!--<script th:src="@{/js/pagecomment.js}"></script>-->
<script th:src="@{/js/jquery/jquery.min.js}" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script th:src="@{/prism/prism.js}"></script>
<script th:src="@{/tocbot/tocbot.min.js}"></script>
<script th:src="@{/qrcode/qrcode.min.js}"></script>
<script th:src="@{/waypoints/jquery.waypoints.js}"></script>
<!--平滑滚动-->
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>
<script>NProgress.start();</script>
<script th:inline="javascript">

    let basePath = [[${#httpServletRequest.getContextPath()}]];
    layui.use(['form', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;

        form.on('submit(topComment)', function (data) {
            let butId = '#' + data.elem.id;
            $(butId).addClass("layui-btn-disabled")
            $.ajax({
                url: basePath + '/comment/commentBlog',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    $(butId).removeClass("layui-btn-disabled")
                    if (result.code) {
                        $(butId).parents('.message-list li').find('.btn-reply').text('回复');
                        $('#blog-comment').append(result.data[0]);
                        $(butId).parent().prev().first().find('textarea').val('')
                        layer.msg(result.msg, {icon: 1, time: 1000});
                    } else {
                        if (result.msg == '请先登录！') {
                            layer.msg(result.msg, {icon: 2, time: 500}, function () {
                                layer.open({
                                    type: 2,
                                    title: '登录',
                                    shade: 0.1,
                                    area: ['550px', '500px'],
                                    content: basePath + '/miniLogin.html',
                                });
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 500});
                        }
                    }
                },
                error: function (arg) {
                    $(butId).removeClass("layui-btn-disabled")
                    layer.msg(arg);
                }
            })
            return false;
        });
        form.on('submit(replyTopComment)', function (data) {
            let para = +data.field.parentCommentId
                + '/' + data.field.repliedUserId + '/' + data.field.blogId + '/' + data.field.content;
            let butId = '#' + data.elem.id;
            console.log(butId)
            $(butId).addClass("layui-btn-disabled")
            $.ajax({
                url: basePath + '/comment/replyTopComment/' + para,
                dataType: 'json',
                type: 'put',
                success: function (result) {
                    $(butId).removeClass("layui-btn-disabled")
                    if (result.code) {
                        $(butId).parent().parent().parent().addClass('layui-hide')
                        $(butId).parents('.message-list li').find('.btn-reply').text('回复');
                        if ($(butId).parent().parent().parent().parent().children().length == 2) {
                            $(butId).parent().parent().parent().before("<hr class='commentHr'>")
                        }
                        $(butId).parent().parent().parent().before(result.data[0]);
                        $(butId).parent().prev().first().find('textarea').val('')
                        layer.msg(result.msg, {icon: 1, time: 1000});
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                },
                error: function (arg) {
                    $(butId).removeClass("layui-btn-disabled")
                    layer.msg(arg);
                }
            })
            return false;
        });

    })

    window.onload = function () {
        NProgress.done();
        $("ul.layui-fixbar").css("display", "none")//隐藏
    };
    $('#blog-comment').on('click', '.btn-reply', function (e) {
        var ve = $(e.target);//获取当前点击事件的元素
        var parentCommentId = ve.attr('data-parentCommentId')
            , repliedUserId = ve.attr('data-repliedUserId')
            , repliedUserNickname = ve.attr('data-repliedUserNickname')
            , $container = ve.parent('p').parent().siblings('.replycontainer');
        if (ve.text() == '回复') {
            $container.find('textarea').attr('placeholder', '回复【' + repliedUserNickname + '】');
            $container.removeClass('layui-hide');
            $container.find('input[name="parentCommentId"]').val(parentCommentId);
            $container.find('input[name="repliedUserId"]').val(repliedUserId);
            ve.parents('.message-list li').find('.btn-reply').text('回复');
            ve.text('收起');
        } else {
            $container.addClass('layui-hide');
            $container.find('input[name="parentCommentId"]').val(0);
            ve.text('回复');
        }
    });

    $(function () {
        //加载目录
        tocbot.init({
            // Where to render the table of contents.
            tocSelector: '.js-toc',
            // Where to grab the headings to build the table of contents.
            contentSelector: '.js-toc-content',
            // Which headings to grab inside of the contentSelector element.
            headingSelector: 'h1, h2, h3',
            // For headings inside relative or absolute positioned containers within content.
            hasInnerContainers: true,
        });
        //加载评论
        let blogId = [[${blogById.getId()}]];

        $.ajax({
            url: basePath + '/comment/getCommentsByBlogId/' + blogId,
            dataType: 'json',
            type: 'get',
            success: function (result) {
                if (result.code) {
                    $('#blog-comment').html(result.data[0]);
                } else {
                    // layer.msg(result.msg, {icon: 2, time: 1000});
                }
            },
            error: function (arg) {
                layer.msg(arg);
            }
        })
    })

    function logout() {
        //询问框
        layer.confirm('真的要退出登录吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.ajax({
                url: basePath + '/user/logout',
                success: function (result) {
                    let jsonData = JSON.parse(result);
                    if (jsonData.code == 1) {
                        //成功
                        layui.layer.msg(jsonData.msg, {icon: 1});
                        window.location = basePath + '/user/toArticle';
                    } else {
                        //失败
                        layer.msg(jsonData.msg, {icon: 2});
                    }
                },
                error: function (arg) {
                    layer.msg(arg);
                }
            })
        }, function () {
            layer.msg('取消退出登录', {
                time: 1000, //1s后自动关闭
            });

        });
    }

    window.setting = function () {
        layer.open({
            type: 2,
            title: '修改个人信息',
            shade: 0.1,
            area: ['1000px', '550px'],
            content: basePath + '/user-setting.html'
        });
    }
    let layerQR;
    $('#wechartQR').mouseover(function () {
        let temp = '<img id="wechartQRImg" src="/image/wechartQR.png" style="width: 120px;height: 120px"/>';
        layerQR = layui.layer.tips(temp, '#wechartQR', {
            anim: 5,
            tips: [3, '#ffffff'],
        });
    });
    $('#wechartQR').mouseout(function () {
        layui.layer.close(layerQR);
    });
    let layerQR2;
    $('#weixinQR').mouseover(function () {
        let temp = '<img id="wechartQRImg" src="/image/wechartQR.png" style="width: 120px;height: 120px"/>';
        layerQR2 = layui.layer.tips(temp, '#weixinQR', {
            anim: 5,
            tips: [3, '#ffffff'],
        });
    });
    $('#weixinQR').mouseout(function () {
        layui.layer.close(layerQR2);
    });

    //返回顶部
    $('#toTop').click(function () {
        $(window).scrollTo(0, 500);
    })
    //滑动监听
    let waypoint = new Waypoint({
        element: $('#waypoint'),
        handler: function (direction) {
            if (direction == 'down') {
                $('#toolbar').show(500);
            } else {
                $('#toolbar').hide(500);
            }
            console.log('Scrolled to waypoint!' + direction)
        }
    })
</script>
</body>
</html>
